<!-- 环境登录 -->
<template>
  <div id="login">
    <div class="top">
      <h1>区域股权表单设计器登录</h1>
    </div>
    <div class="main">
      <div class="loginBox">
        <div class="login-img"></div>
        <div class="login-form" v-loading="loading">
          <div class="login-main">
            <p class="login-title">欢迎登录</p>
            <el-form
              label-suffix=":"
              :rules="loginRules"
              ref="loginForm"
              :model="loginForm"
              label-width="90px"
            >
              <el-form-item prop="tenantId" label="租户ID">
                <el-input
                  size="small"
                  @keyup.enter.native="handleLogin"
                  v-model="loginForm.tenantId"
                  auto-complete="off"
                ></el-input>
              </el-form-item>
              <el-form-item prop="username" label="用户名">
                <el-input
                  size="small"
                  @keyup.enter.native="handleLogin"
                  v-model="loginForm.username"
                  auto-complete="off"
                ></el-input>
              </el-form-item>
              <el-form-item prop="password" label="password">
                <el-input
                  size="small"
                  @keyup.enter.native="handleLogin"
                  v-model="loginForm.password"
                  auto-complete="off"
                ></el-input>
              </el-form-item>
              <el-form-item prop="code" label="验证码">
                <el-row :span="24">
                  <el-col :span="16">
                    <el-input
                      size="small"
                      @keyup.enter.native="handleLogin"
                      v-model="loginForm.code"
                      auto-complete="off"
                    ></el-input>
                  </el-col>
                  <el-col :span="8">
                    <div class="login-code">
                      <img :src="loginForm.image" class="login-code-img" @click="refreshCode" />
                    </div>
                  </el-col>
                </el-row>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  size="small"
                  @click.native.prevent="handleLogin"
                  class="login-submit"
                >登录</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
    <div class="footer"></div>
  </div>
</template>

<script>
import request from "@/plugins/axios";
import md5 from "js-md5";
import Cookies from "js-cookie";

const loginByUsername = (
  landingMode,
  tenantId,
  username,
  password,
  type,
  key,
  code
) =>
  request({
    url: "/api/blade-auth/oauth/token",
    method: "post",
    headers: {
      "Tenant-Id": tenantId,
      "Captcha-Key": key,
      "Captcha-Code": code,
      username: username,
      password: password
    },
    params: {
      landingMode,
      tenantId,
      grant_type: "captcha",
      scope: "all",
      type
    }
  });

export default {
  name: "login",
  data() {
    return {
      loading: false,
      loginRules: {
        tenantId: [
          { required: false, message: "请输入租户ID", trigger: "blur" }
        ],
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 1, message: "密码长度最少为6位", trigger: "blur" }
        ]
      },
      loginForm: {
        //租户ID
        tenantId: "000000",
        //用户名
        username: "otcadmin",
        //密码
        password: "1qaz@WSX",
        //账号类型
        type: "account",
        //验证码的值
        code: "",
        //验证码的索引
        key: "",
        //预加载白色背景
        image:
          ""
      }
    };
  },
  created() {
    this.refreshCode();
  },
  methods: {
    refreshCode() {
      request({
        url: "/api/blade-auth/oauth/captcha",
        method: "get"
      }).then(res => {
        const data = res.data;
        this.loginForm.key = data.key;
        this.loginForm.image = data.image;
      });
    },
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true;
          loginByUsername(
            "mgr",
            this.loginForm.tenantId,
            this.loginForm.username,
            md5(this.loginForm.password),
            this.loginForm.type,
            this.loginForm.key,
            this.loginForm.code
          )
            .then(res => {
              this.loading = false;
              const data = res.data;
              if (data.error_description) {
                this.$message.error(data.error_description);
              } else {
                Cookies.set("saber-access-token", data.access_token);
                this.$router.push("/formDesign");
              }
            })
            .catch(error => {
              this.loading = false;
              this.$message.error(error);
            });
        }
      });
    }
  }
};
</script>

<style lang="scss" scope>
#login {
  .top {
    height: 70px;
    width: 100%;

    h1 {
      width: 1200px;
      margin: 0 auto;
      font-weight: 500;
      font-size: 18px;
      line-height: 60px;
    }
  }

  .main {
    height: calc(100vh - 20vh - 70px);
    padding-top: 130px;
    background-color: rgb(244, 245, 246);
    position: relative;

    .loginBox {
      width: 1200px;
      height: 600px;
      display: flex;
      margin: 0 auto;
      position: absolute;
      top: calc(50% - 300px);
      left: calc(50% - 600px);
      box-shadow: 0px 2px 11px 2px #eaeaea;
      .login-img {
        background-color: white;
        width: 660px;
        height: 100%;
        background-image: url("../assets/dlbj.png");
        background-size: 100% 100%;
      }
      .login-form {
        width: 540px;
        background-color: white;

        .el-form {
          padding: 0 25px;
        }
      }
      .login-title {
        color: #76838f;
        margin-top: 60px;
        margin-bottom: 50px;
        font-weight: 500;
        font-size: 22px;
        text-align: center;
        letter-spacing: 4px;
      }

      .login-submit {
        width: 100%;
        height: 45px;
        border: 1px solid #409eff;
        background: none;
        font-size: 18px;
        letter-spacing: 2px;
        font-weight: 300;
        color: #409eff;
        cursor: pointer;
        margin-top: 30px;
        font-family: "neo";
        -webkit-transition: 0.25s;
        transition: 0.25s;
      }
    }
  }
}
</style>